<template>
  <div class='math-apply'>
    <ul class="list">
      <li>
        <h4>使用向量绘制一棵树</h4>
        <canvas width="500" height="400" class="plant"></canvas>
      </li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>

<script>
import { Vector2D } from './Vector2D'

export default {
  name: 'MathApply',
  props: {

  },
  components: {

  },
  data () {
    return {
      plant: null
    }
  },
  created () {

  },
  computed: {
  },
  mounted () {
    this.plant = document.getElementsByClassName('plant')[0]
    this.drawTree()
  },
  watch: {

  },
  methods: {
    drawTree () {
      // 使用canvas2d绘图
      const context = this.plant.getContext('2d')
      // 将直角坐标系向下平移到底端
      context.translate(0, this.plant.height)
      // 将y坐标翻转上去
      context.scale(1, -1)
      // 线段末端以圆形结束。
      context.lineCap = 'round'
      // 创建起点向量
      const v0 = new Vector2D(250, 0)
      this.drawBranch(context, v0, 50, 10, 1, 3)
    },
    // 画树枝函数封装
    // context 是我们的 Canvas2D 上下文
    // v0是起始向量
    // length 是当前树枝的长度
    // thickness 是当前树枝的粗细
    // dir 是当前树枝的方向，用与 x 轴的夹角表示，单位是弧度。
    // bias 是一个随机偏向因子，用来让树枝的朝向有一定的随机性
    drawBranch (context, v0, length, thickness, dir, bias) {
      // 创建一个单位向量
      const v = new Vector2D().rotate(dir).scale(length)
      const v1 = v0.copy().add(v)
      context.lineWidth = thickness
      context.beginPath()
      // 画起点
      context.moveTo(...v0)
      // 画终点
      context.lineTo(...v1)
      // 画线条
      context.stroke()
      // 将粗的树分成左右两边
      if (thickness > 2) {
        // 添加树枝分叉的偏转角度
        const left = Math.PI / 4 + 0.5 * (dir + 0.2) + bias * (Math.random() - 0.5)
        this.drawBranch(context, v1, length * 0.9, thickness * 0.8, left, bias * 0.9)
        const right = Math.PI / 4 + 0.5 * (dir - 0.2) + bias * (Math.random() - 0.5)
        this.drawBranch(context, v1, length * 0.9, thickness * 0.8, right, bias * 0.9)
      }

      // 如果分叉的树枝太细，加上花瓣点缀
      if (thickness < 5 && Math.random() < 0.3) {
        context.save()
        context.strokeStyle = '#c72c35'
        context.lineWidth = Math.random() * 6 + 3
        context.beginPath()
        context.moveTo(...v1)
        context.lineTo(v1.x, v1.y - 2)
        context.stroke()
        context.restore()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.math-apply {
  .list{
    display: grid;
    grid-template-columns: repeat(4, 25%);
    // transform: translate(0, 400);
  }
}
</style>
